<template>
    <div class="wrap">
        <slider>
            <div v-for="item in banners">
                <a :href="item.linkUrl">
                    <img class="needsclick" :src="item.picUrl">
                </a>
            </div>
        </slider>
        <section>
            <div class="head-title"><i></i><span>课程背景</span><i></i></div>
            <div class="indus-define common-sec">
	            <p v-for="item in define">{{item.text}}</p>
	        </div>
	        <div class="s-part">
	            <div class="title title2"><i></i>课程特色</div>
	            <div class="b-town-fea"><img src="../../common/img/b-town-fea.png"></div>
	        </div>
	        <div class="s-part">
	            <div class="title"><i></i>课程设置</div>
                <tab
                    :tabList="tabs"
                    :tabParentClass="'b-town-tabs'"
                    :tabItemClass="'policy-tabs'"
                    :conParentClass="'policy-container b-town-set'"
                ></tab>
	        </div>
        </section>
        <section>
            <div class="head-title h4-w"><i></i><span>学习目标</span><i></i></div>
            <div class="indus-define" style="text-indent:29px;">
                <p>本专题培训主以特色小镇和田园综合体的建设为主线，针对特色小镇建设、田园综合体建设的核心问题，通过法规政策传导、实践经验分享、典型案例解读等培训手段，让学员理解特色小镇与田园综合体规划建设的新理念、新思路、新方式、新途径，熟悉掌握特色小镇与田园综合体总体定位规划、设计策略、空间特色、产业布局、文化挖掘、开发模式、建设运营、投融资体制以及经典案例，提高特色小镇与田园综合体规划、投融资、建设运营等实操能力。</p>
            </div>
            <div class="s-part">
                <div class="title"><i></i>线上课程</div>
                <my-swiper
                    :wrapClass="'b-town-online'"
                >
                    <li slot='mySlot' class="swiper-slide swiper-slide-active"
                       v-for="item in online">
                        <a :videohref="item.ohref">
                            <div class="online-tea">
                                <img :src="item.img">
                                <div class="online-tea-info">
                                    <p v-for="p in item.onlineCon">{{p}}</p>
                                </div>
                            </div>
                            <div class="con">
                                <p>{{item.title}}</p>
                                <span>{{item.teacher}}</span>
                            </div>
                            <p class="btn">免费</p>
                        </a>
                    </li>
                </my-swiper>
            </div>
            <div class="s-part">
                <div class="title"><i></i>线下课程</div>
                <my-swiper
                    :wrapClass="'b-town-unline'"
                >
                    <li slot='mySlot' class="swiper-slide" v-for="item in unline">
                        <div class="l">
                            <img :src="item.img">
                            <p>{{item.title}}</p>
                        </div>
                        <div class="r">
                            <p class="top">本期亮点</p>
                            <span>{{item.con}}</span>
                            <a class="signUp" href="">详情</a>
                        </div>
                    </li>
                </my-swiper>
                <!-- <div id="town-unline" class="swiper-container swiper-container-horizontal">
                    <ul class="b-town-unline swiper-wrapper">
                        <li class="swiper-slide" v-for="item in unline">
                            <div class="l">
                                <img :src="item.img">
                                <p>{{item.title}}</p>
                            </div>
                            <div class="r">
                                <p class="top">本期亮点</p>
                                <span>{{item.con}}</span>
                                <a class="signUp" href="">详情</a>
                            </div>
                        </li>
                    </ul>
                </div> -->
            </div>
        </section>
        <section>
            <div class="head-title"><i></i><span>部分师资介绍</span><i></i></div>
            <div id="town-teacher" class="swiper-container-horizontal">
                <div class="b-town-tea swiper-wrapper">
                    <a class="swiper-slide active"
                    v-for="(item,index) in teacher"
                    :class="{'active':teaNum==index}"
                    @click="tabTea(index)"
                    ><img :src="item.img" :alt="item.name"></a>
                </div>
            </div>
            <div class="teacher-info">
                <div class="teacher-info-item show"
                    v-for="(item,index) in teacher"
                    v-show="teaNum==index"
                >
                    <p>{{item.name}}</p>
                    <span class="sIntro">{{item.info}}</span>
                </div>
            </div>
        </section>
        <m-bottom></m-bottom>
    </div>
</template>
<script>
import Slider from 'base/slider/slider'
import MBottom from 'components/m-bottom/m-bottom'
import Tab from 'base/tab/tab'
import MySwiper from 'base/myswiper/myswiper';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default{
    data(){
        return {
        	num:0,
            teaNum:0,
        	banners:[
                {
                    picUrl:require("../../common/img/banner/business-town.jpg"),
                    linkUrl:"#"
                },
                {
                    picUrl:require("../../common/img/banner/business-town-old.jpg"),
                    linkUrl:"#"
                }
            ],
            define:[
                {
                    text:"《国家新型城镇化规划（2014－2020年）》在“重点发展小城镇”一节中提出要通过规划引导、市场运作，将具有特色资源、区位优势的小城镇，培育成为文化旅游、商贸物流、资源加工、交通枢纽等专业特色镇。《国务院关于深入推进新型城镇化建设的若干意见》第十三条“加快特色城镇发展”一节中又一次提出。"
                },
                {
                    text:"十九大报告重点提出乡村振兴，从而特色小镇和田园综合体得到各地“一呼百应”，客观方面来看，是因为在经济新常态条件下，社会资本参与小规模土地开发具有更多的必要性与现实可能性条件。从政策层面上来看，特色小镇与田园综合体发展跟城镇化、供给侧改革、宏观经济、政府职能转变等方面都有密切关系，因而成为各类政策集中支持的一个“黄金结合点”。结合PPP模式在国内的运用，参与特色小镇与田园综合体建设的企业红利凸显。"
                },
                {
                    text:"为进一步推动特色小镇的建设，中厚明德商学院结合自身优势特开设《特色小镇实战落地班》，汇集主管部委领导、政策制定参与专家、行业实战专家，分别从特色小镇政策和推进方法、特色小镇规划、特色小镇ip打造、特色小镇融资等多方面深度解析，精准发力，释放产业核心优势，让您在新经济环境下斩获先机。"
                }
            ],
            tabs:[
                {
                    tab:"理论解析与政策解读",
                    con:"特色小镇、田园综合体政策解读；  特色小镇、田园综合体理论解析；  特色小镇、田园综合体发展趋势；  园区开发政策解读；  乡村振兴解读"
                },
                {
                    tab:"田园综合体",
                    con:"田园综合体政策机遇和趋势展望；  田园综合体运营模式创新及实践；  田园综合体规划设计之道；  田园综合体融资创新模式产业政策、产业趋势及申报审批"
                },
                {
                    tab:"商业模式",
                    con:"土地开发中的PPP模式与政府购买模式；  传统模式下的融资建设方式；  特色小镇与田园综合体项目融资"
                },
                {
                    tab:"融资",
                    con:"特色小镇、田园综合体政策解读；  典型特色小镇、田园综合体案例分享；  深入理解规划设计，运营、融资等操作实务"
                },
                {
                    tab:"案例分析",
                    con:"特色小镇、田园综合体政策解读；  典型特色小镇、田园综合体案例分享；  深入理解规划设计，运营、融资等操作实务"
                }
            ],
            online:[
            	{
            		ohref:"http://dmyjrv2.oss-cn-hangzhou.aliyuncs.com/townapp/video/web_video_yuanyinghua.mp4",
            		img:require("../../common/img/袁英华.png"),
            		title:"乡村振兴、特色小镇与金融",
            		teacher:"主讲人：袁英华",
            		onlineCon:["袁英华","中国投资协会副会长","项目投融资专业委员会会长","国家开发银行原行务委员","信贷局原局长"]
            	},
            	{
            		href:"http://dmyjrv2.oss-cn-hangzhou.aliyuncs.com/townapp/video/web_video_yuefengjuan.mp4",
            		img:require("../../common/img/岳凤娟.png"),
            		title:"特色小镇与田园综合体政策及运营",
            		teacher:"主讲人：岳凤娟",
            		onlineCon:["岳凤娟","中厚明德商学院院长","项中厚乾元投资有限公司董事长","资深培训与资本运作专家"]
            	},{
            		href:"http://dmyjrv2.oss-cn-hangzhou.aliyuncs.com/townapp/video/web_video_guowei.mp4",
            		img:require("../../common/img/郭巍.png"),
            		title:"特色小镇开发的流程",
            		teacher:"主讲人：郭巍",
            		onlineCon:["郭巍","PPP模式实际操作运营专家","区域产业发展规划专家","城市规划专家、高级工程师","中国产业地产资深实操人士"]
            	}
            ],
            unline:[
                {
                    img:require("../../common/img/b-town-unline2.jpg"),
                    title:"融资申报班",
                    con:"名师荟萃、案例复盘、政策解读、问诊咨询、实战干货、资源共享"
                },
                {
                    img:require("../../common/img/b-town-unline1.jpg"),
                    title:"拿地+田园综合体+小镇申报班",
                    con:"政策解读、规划设计、操盘运营、拿地策略、问诊咨询、发展机遇"
                },
            ],
            teacher:[
                {
                    img:require("../../common/img/town/乔润令.jpg"),
                    name:"乔润令",
                    info:"国家发改委城市和小城镇改革发展中心副主任，长期从事中国小城镇和城镇化的实证研究和政策研究。熟悉中国小城镇的发展变化。对于中国小城镇的发展、中国的城镇化以及土地制度的变革、小城镇管理体制改革、户籍管理制度改革等领域都有深入的研究。"
                },
                {
                    img:require("../../common/img/town/郭巍.jpg"),
                    name:"郭巍",
                    info:"PPP模式实际操作运营专家、区域产业发展规划专家、中国新型城镇化的开拓者、中国产业经济研究专家、中国城市规划学会会员、城市规划专家、高级工程师、中国产业地产资深实操从业人士。"
                },
                {
                    img:require("../../common/img/town/贾康.jpg"),
                    name:"贾康",
                    name:"财政部财政科学研究所所长、博导，中国财政学会副会长兼秘书长，财政部高级技术职务评审委员会副主任，北京市人民政府特聘专家、中国人民大学、国家行政学院等特聘教授；曾多次获国家领导人邀请谈经济工作，被媒体称之为“中南海问策”。"
                },
                {
                    img:require("../../common/img/town/张鹏.jpg"),
                    name:"张鹏",
                    info:"经济学博士，财政部政策实验室宏观经济部主任，财政部多项财政改革的关键研究人员，财政部综合经济预测与财政政策分析组成员，中国社科院宏观经济运行与财政政策研究组主要负责人，财政部呈送中办、国办宏观调控领域研究报告或专项报告的署名报告人和核心执笔人。"
                },
                {
                    img:require("../../common/img/town/王守清.jpg"),
                    name:"王守清",
                    info:"清华大学建设管理系教授、博导，清华大学国际工程项目管理研究院副院长；全国项目管理领域工程硕士教育协作组组长、欧亚PPP联络网中方代表、亚开行PPP专家库成员、中国PPP法起草小组核心成员。"
                },
                {
                    img:require("../../common/img/town/肖金成.jpg"),
                    name:"肖金成",
                    name:"国家发改委国土开发与地区经济研究前所长，国家发展和改革委员会宏观经济研究院研究员、博士生导师。曾任国家发展和改革委员会经济研究所、国家发展和改革委员会国土开发与地区经济研究所室主任、所长助理、副所长。"
                },
                {
                    img:require("../../common/img/town/陈安华.jpg"),
                    name:"陈安华",
                    info:"中国特色小镇建设与规划设计研究院执行院长、浙江省建筑科学设计研究院建筑设计院高级规划师，“联合国人居奖”获得者。"
                },
                {
                    img:require("../../common/img/town/李季.jpg"),
                    name:"李季",
                    info:"中国文化产业园区联盟主席、清华大学文创中心主任、清大文产规划设计研究院院长。主要研究领域：城市文化创意产业；城市产业园规划与建设；区域文化产业规划与发展；创意产业投融资模式等研究。"
                }
            ]
        }
    },
    methods:{
        tab(index){
            this.num=index
        },
        tabTea(index){
            this.teaNum=index
        }
    },
    mounted(){
        var townOnline = new Swiper('#town-teacher', {
            freeMode: true,
            slidesPerView: 'auto',
            freeModeSticky: true
        })
    },
    components:{
        Slider,
        MBottom,
        Tab,
        MySwiper
    }
}
</script>
<style type="text/css">
.b-town-fea{
    width: 100%;
}
.b-town-fea img{
    width: 300px;
    height: 300px;
    margin:0 auto;
    display: block;
}
.b-town-tabs .policy-tabs{
    width: auto;
    margin:0 10px;
}
.b-town-set{height: 120px;}

.b-town-online{
}
.b-town-online li{
    width: 210px;
    height: 224px;
    border:1px solid #e5e4e2;
    float: left;
    margin-right: 16px;
    position: relative;
}
.b-town-online li:last-child{
    margin-right: 0;
}
.b-town-online li a{
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.b-town-online li a .online-tea{
    width: 100%;
    height: 118px;
    background:url(../../common/img/online-bg.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding:15px 10px 10px 10px;
}
.b-town-online li a .online-tea img{
    width: 70px;
    height: 86px;
    float: left;
    margin-right:9px;
}
.b-town-online li a .online-tea .online-tea-info{
    color: #fff;
    float: left;
    width: 110px;
}
.b-town-online li a .online-tea .online-tea-info p{
    margin-bottom:5px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
}

.b-town-online li .con{
    width: 100%;
    height: 66px;
    background-color: #fff;
    box-sizing: border-box;
    padding:5px 4px;
}
.b-town-online li .con p{
    font-size: 16px;
    line-height: 34px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;overflow: hidden;
}
.b-town-online li .con span{
    color:#676767;
}
.b-town-online li .btn{
    text-align: center;
    color:#3c80d5;
    line-height:40px;
    background-color: #f5f5f5;
}
</style>
